<template>
  <div style="position:relative;">
    <div class="button-box" v-drag draggable="false"
         @mouseup="clickHandler" @mousedown="mousedown" @mousemove="mousemove">
      <el-popover
        v-model="popoverVisible"
        placement="top-end"
        offset="101"
        width="230"
        trigger="manual"
        :reference="btnRef">
        <div v-html="message"></div>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="popoverVisible = false; ">不用了</el-button>
          <el-button size="mini" type="primary" @click="popoverVisible = false">好的</el-button>
        </div>
        <div slot="reference" class="btn-bg-img" ref="btnRef"></div>
      </el-popover>
      <!-- Other content -->
    </div>
  </div>
</template>

<script>
import {Popover} from 'element-ui';
import {baseURL} from "../axiosConfig";

export default {
  components: {
    'el-popover': Popover
  },
  props: ['caseInfo'],
  data() {
    return {
      popoverVisible: false,
      message: '',
      btnRef: null, // 新增一个变量用于存储引用
      TDA: 0,

      text: '双击显示案件详情',
      isOpen: false,
      isMove: false,
      mouseDownX: 0,
      mouseDownY: 0,
      flag: false
    }
  },
  mounted() {
    document.addEventListener('keydown', this.handleKeydown);
  },
  beforeDestroy() {
    document.removeEventListener('keydown', this.handleKeydown);
  },
  methods: {
    handleKeydown(e) {
      switch (e.key) {
        case 'F1':
          e.preventDefault(); // 阻止默认的帮助键行为
          this.showMessage("<p>太棒了！你已经完成了这节课程。接下来，你想做一些练习来巩固你的知识吗？</p>");
          break;
        case 'F2':
          e.preventDefault(); // 阻止默认的帮助键行为
          this.TDA = this.$store.state.TDA;//接收值
          this.showMessage("<p>很好，你已经完成了练习。本次获得TDA为 <a style='color: #1d8cf8'> ${this.TDA}</a> ，看起来你已经很好地掌握了这个知识点。要不要尝试一些更高难度的题目挑战自己？</p>");
          break;
        case 'F3':
          this.TDA = this.$store.state.TDA;//接收值
          e.preventDefault(); // 阻止默认的帮助键行为
          this.showMessage("<p>我注意到你在这次练习中遇到了一些困难。不要气馁，这是学习过程中的正常现象。让我们再看一些相关的资料，然后再试一次吧。你想要问我问题吗？</p>");
          break;
        case 'F4':
          e.preventDefault(); // 阻止默认的帮助键行为
          this.showMessage("<p>恭喜你，你已经完成了一个重要的学习里程碑！你完成了这个这门课程，接下来，你要更深入地学习完整路径吗？</p>");
          break;
        default:
          break;
      }
    },
    showMessage(msg) {
      this.message = msg.replace('${this.TDA}', this.TDA);
      this.popoverVisible = true;
    },
    clickHandler() {
      if (!this.isMove) {
        // 打开谷歌
        window.open(baseURL+":82/#/")
        this.visible = !this.visible;
      }
    },
    mousedown(e) {
      this.mouseDownX = e.pageX
      this.mouseDownY = e.pageY
      this.flag = true
      document.addEventListener('mouseup', this.mouseup)
    },
    mousemove(e) {
      if (this.flag) {
        this.isMove = true
        let l = e.clientX - this.mouseDownX
        let t = e.clientY - this.mouseDownY
        this.mouseDownX = e.clientX
        this.mouseDownY = e.clientY
        this.$el.style.left = this.$el.offsetLeft + l + 'px'
        this.$el.style.top = this.$el.offsetTop + t + 'px'
      }
    },
    mouseup() {
      this.flag = false
      if (this.isMove) {
        this.isMove = false
      }
      document.removeEventListener('mouseup', this.mouseup)
    }
  },
  directives: {
    drag: {
      inserted(el) {
        el.onmousedown = function (e) {
          let disX = e.clientX - el.offsetLeft
          let disY = e.clientY - el.offsetTop
          document.onmousemove = function (e) {
            let l = e.clientX - disX
            let t = e.clientY - disY
            el.style.left = l + 'px'
            el.style.top = t + 'px'
          }
          document.onmouseup = function () {
            document.onmousemove = null
            document.onmouseup = null
          }
          return false
        }
      }
    }
  }
}
</script>

<style scoped>
.button-box {
  position: fixed;
  bottom: 3%;
  right: 5%;
  padding-left: 15px;
  padding-top: 8px;
  cursor: pointer;
  opacity: 1;
  z-index: 888;
}

.btn-bg-img {
  width: 7.1rem;
  height: 8rem;
  background-image: url("/img/robot.png");
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.button-box:hover {
  color: white;
  opacity: 1;
}

el-button:focus {
  border: none;
}
</style>
